<template>
    <!-- 材料详情 -->
    <a-card title="材料详情" style="width: 80rem ;margin-bottom:30px">
        <div style="display: flex;justify-content: flex-end; margin-bottom:10px">
            <a-button type="primary" style="margin-right: 20px; background:orange">下载模板</a-button>
            <a-button type="primary" style="margin-right: 40px; background:orange" >批量导入</a-button>
        </div>
        <a-form ref="formRef" name="dynamic_form_nest_item" :model="dynamicValidateForm" @finish="onFinish" layout="vertical">
            <div v-for="(user, index) in dynamicValidateForm.users" :key="user.id" style="display: flex; align-items: baseline; margin-bottom: 8px;">
                <MinusCircleOutlined class="dynamic-delete-button" @click="removeUser(user)" style="align-self: center;" />
                <a-form-item :name="['users', index, 'MaterialName']" :rules="{ required: true }" label="材料名称" style="flex: 1; margin-right: 8px;">
                    <a-input v-model:value="user.MaterialName"  />
                </a-form-item>
                <a-form-item :name="['users', index, 'Model']" :rules="{ required: true }" label="规格型号" style="flex: 1; margin-right: 8px;">
                    <a-input v-model:value="user.Model"  />
                </a-form-item>
                <a-form-item :name="['users', index, 'Dosage']" :rules="{ required: true }" label="工程用量" style="flex: 1; margin-right: 8px;">
                    <a-input v-model:value="user.Dosage"  />
                </a-form-item>
                <a-form-item :name="['users', index, 'Unit']" :rules="{ required: true }" label="计量单位" style="flex: 1; margin-right: 8px;">
                    <a-input v-model:value="user.Unit"  />
                </a-form-item>
                <a-form-item :name="['users', index, 'Brand']" :rules="{ required: true }" label="品牌" style="flex: 1; margin-right: 8px;">
                    <a-input v-model:value="user.Brand"  />
                </a-form-item>
                <a-form-item :name="['users', index, 'Total']" :rules="{ required: true }" label="报价供应商数量" style="flex: 1; margin-right: 8px;">
                    <a-input v-model:value="user.Total"  />
                </a-form-item>
                <a-form-item :name="['users', index, 'Content']" :rules="{ required: true }" label="询价内容" style="flex: 1; margin-right: 8px;">
                    <a-input v-model:value="user.Content"  />
                </a-form-item>
                <a-form-item :name="['users', index, 'IncludedTax']" :rules="{ required: true }" label="是否含税" style="flex: 1; margin-right: 8px;">
                    <a-input v-model:value="user.IncludedTax"  />
                </a-form-item>
                <a-form-item :name="['users', index, 'IncludedFreight']" :rules="{ required: true }" label="是否含运费" style="flex: 1; margin-right: 8px;">
                    <a-input v-model:value="user.IncludedFreight"  />
                </a-form-item>
                <a-form-item :name="['users', index, 'Remark']" :rules="{ required: true }" label="备注" style="flex: 1; margin-right: 8px;">
                    <a-input v-model:value="user.Remark"  />
                </a-form-item>
            </div>
            
                <a-button type="ghost" @click="addUser" style="color: orange;" size="small">
                    <PlusOutlined />
                    添加一项
                </a-button>
            
            
        </a-form>
    </a-card>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
import type { FormInstance } from 'ant-design-vue';

interface User {
    MaterialName:string;//材料名称
    Model:string;//规格型号
    Dosage:string;//工程用量
    Unit:string;//计量单位
    Brand:string;//品牌
    Total:string;//报价供应商数量
    Content:string//询价内容
    IncludedTax:string//是否含税
    IncludedFreight:string//是否含运费
    Remark:string//备注


    id: number;
}
const formRef = ref<FormInstance>();
const dynamicValidateForm = reactive<{ users: User[] }>({
    users: [],
});
const removeUser = (item: User) => {
    const index = dynamicValidateForm.users.indexOf(item);
    if (index !== -1) {
        dynamicValidateForm.users.splice(index, 1);
    }
};
const addUser = () => {
    dynamicValidateForm.users.push({
        MaterialName:'',//材料名称
        Model:'',//规格型号
        Dosage:'',//工程用量
        Unit:'',//计量单位
        Brand:'',//品牌
        Total:'',//报价供应商数量
        Content:'',//询价内容
        IncludedTax:'',//是否含税
        IncludedFreight:'',//是否含运费
        Remark:'',//备注
        id: Date.now(),
    });
};
const onFinish = values => {
    console.log('Received values of form:', values);
    console.log('dynamicValidateForm.users:', dynamicValidateForm.users);
};

</script>

<style lang="scss" scoped>

.dynamic-delete-button {
    cursor: pointer;
    position: relative;
    top: 4px;
    font-size: 24px;
    color: #999;
    transition: all 0.3s;
  }
  .dynamic-delete-button:hover {
    color: #777;
  }
</style>